<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: List Reorder w/Scrolling</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: List Reorder w/Scrolling</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>This example shows how to make a sortable list using Custom Event Bubbling and Node scrolling.</p>
</div>

<div class="example">
    <style type="text/css" media="screen">
    .yui3-dd-proxy {
        text-align: left;
    }
    #play {
        border: 1px solid black;
        padding: 10px;
        margin: 10px;
        zoom: 1;
    }
    #play:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}
    #play ul {
        border: 1px solid black;
        margin: 10px;
        width: 200px;
        height: 300px;
        float: left;
        padding: 0;
        zoom: 1;
        position: relative;
        overflow: auto;
    }
    #play ul li {
        background-image: none;
        list-style-type: none;
        padding-left: 20px;
        padding: 5px;
        margin: 2px;
        cursor: move;
        zoom: 1;
        position: relative;
    }
    #play ul li.list1 {
        background-color: #8DD5E7;
        border:1px solid #004C6D;
    }
    #play ul li.list2 {
        background-color: #EDFF9F;
        border:1px solid #CDCDCD;
    }    
</style>

    <div id="play">
        <ul id="list1">
            <li class="list1">Item #1</li>
            <li class="list1">Item #2</li>
            <li class="list1">Item #3</li>
            <li class="list1">Item #4</li>
            <li class="list1">Item #5</li>
            <li class="list1">Item #6</li>
            <li class="list1">Item #7</li>
            <li class="list1">Item #8</li>
            <li class="list1">Item #9</li>
            <li class="list1">Item #10</li>
            <li class="list1">Item #11</li>
            <li class="list1">Item #12</li>
            <li class="list1">Item #13</li>
            <li class="list1">Item #14</li>
            <li class="list1">Item #15</li>
            <li class="list1">Item #16</li>
            <li class="list1">Item #17</li>
            <li class="list1">Item #18</li>
            <li class="list1">Item #19</li>
            <li class="list1">Item #20</li>
        </ul>
        <ul id="list2">
            <li class="list2">Item #1</li>
            <li class="list2">Item #2</li>
            <li class="list2">Item #3</li>
            <li class="list2">Item #4</li>
            <li class="list2">Item #5</li>
            <li class="list2">Item #6</li>
            <li class="list2">Item #7</li>
            <li class="list2">Item #8</li>
            <li class="list2">Item #9</li>
            <li class="list2">Item #10</li>
            <li class="list2">Item #11</li>
            <li class="list2">Item #12</li>
            <li class="list2">Item #13</li>
            <li class="list2">Item #14</li>
            <li class="list2">Item #15</li>
            <li class="list2">Item #16</li>
            <li class="list2">Item #17</li>
            <li class="list2">Item #18</li>
            <li class="list2">Item #19</li>
            <li class="list2">Item #20</li>
        </ul>    
        
    </div>



<script type="text/javascript">
    YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', 'dd-scroll', function(Y) {
        //Listen for all drop:over events
        //Y.DD.DDM._debugShim = true;

        Y.DD.DDM.on('drop:over', function(e) {
            //Get a reference to our drag and drop nodes
            var drag = e.drag.get('node'),
                drop = e.drop.get('node');
            
            //Are we dropping on a li node?
            if (drop.get('tagName').toLowerCase() === 'li') {
                //Are we not going up?
                if (!goingUp) {
                    drop = drop.get('nextSibling');
                }
                //Add the node to this list
                e.drop.get('node').get('parentNode').insertBefore(drag, drop);
                //Set the new parentScroll on the nodescroll plugin
                e.drag.nodescroll.set('parentScroll', e.drop.get('node').get('parentNode'));            
                //Resize this nodes shim, so we can drop on it later.
                e.drop.sizeShim();
            }
        });
        //Listen for all drag:drag events
        Y.DD.DDM.on('drag:drag', function(e) {
            //Get the last y point
            var y = e.target.lastXY[1];
            //is it greater than the lastY var?
            if (y < lastY) {
                //We are going up
                goingUp = true;
            } else {
                //We are going down.
                goingUp = false;
            }
            //Cache for next check
            lastY = y;
            Y.DD.DDM.syncActiveShims(true);
        });
        //Listen for all drag:start events
        Y.DD.DDM.on('drag:start', function(e) {
            //Get our drag object
            var drag = e.target;
            //Set some styles here
            drag.get('node').setStyle('opacity', '.25');
            drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
            drag.get('dragNode').setStyles({
                opacity: '.5',
                borderColor: drag.get('node').getStyle('borderColor'),
                backgroundColor: drag.get('node').getStyle('backgroundColor')
            });
        });
        //Listen for a drag:end events
        Y.DD.DDM.on('drag:end', function(e) {
            var drag = e.target;
            //Put our styles back
            drag.get('node').setStyles({
                visibility: '',
                opacity: '1'
            });
        });
        //Listen for all drag:drophit events
        Y.DD.DDM.on('drag:drophit', function(e) {
            var drop = e.drop.get('node'),
                drag = e.drag.get('node');

            //if we are not on an li, we must have been dropped on a ul
            if (drop.get('tagName').toLowerCase() !== 'li') {
                if (!drop.contains(drag)) {
                    drop.appendChild(drag);
                    //Set the new parentScroll on the nodescroll plugin
                    e.drag.nodescroll.set('parentScroll', e.drop.get('node'));                
                }
            }
        });
        
        //Static Vars
        var goingUp = false, lastY = 0;

        //Get the list of li's in the lists and make them draggable
        var lis = Y.all('#play ul li');
        lis.each(function(v, k) {
            var dd = new Y.DD.Drag({
                node: v,
                target: {
                    padding: '0 0 0 20'
                }
            }).plug(Y.Plugin.DDProxy, {
                moveOnEnd: false
            }).plug(Y.Plugin.DDConstrained, {
                constrain2node: '#play'
            }).plug(Y.Plugin.DDNodeScroll, {
                node: v.get('parentNode')
            });
        });

        //Create simple targets for the 2 lists.
        var uls = Y.all('#play ul');
        uls.each(function(v, k) {
            var tar = new Y.DD.Drop({
                node: v
            });
        });
        
        
    });


</script>

</div>
<h3 id="setting-up-the-lists">Setting up the lists</h3>
<p>First we will make a list that we want to make sortable.</p>

<pre class="code prettyprint">&lt;div id=&quot;play&quot;&gt;
&lt;ul id=&quot;list1&quot;&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #1&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #2&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #3&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #4&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #5&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #6&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #7&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #8&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #9&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #10&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #11&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #12&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #13&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #14&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #15&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #16&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #17&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #18&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #19&lt;&#x2F;li&gt;
    &lt;li class=&quot;list1&quot;&gt;Item #20&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;ul id=&quot;list2&quot;&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #1&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #2&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #3&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #4&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #5&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #6&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #7&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #8&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #9&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #10&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #11&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #12&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #13&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #14&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #15&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #16&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #17&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #18&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #19&lt;&#x2F;li&gt;
    &lt;li class=&quot;list2&quot;&gt;Item #20&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;    

    &lt;&#x2F;div&gt;</pre>


<h3 id="make-it-scrollable">Make it scrollable</h3>
<p>Now add some CSS to make it scrollable.</p>

<pre class="code prettyprint">#play ul {
    &#x2F;* Snipped *&#x2F;
    overflow: auto;
}</pre>


<h3 id="setting-up-the-yui-instance">Setting up the YUI Instance</h3>
<p>Now we need to create our YUI instance and tell it to load the <code>dd-constrain</code>, 
<code>dd-proxy</code>, <code>dd-drop</code> and <code>dd-scroll</code>, modules.</p>

<pre class="code prettyprint">YUI().use(&#x27;dd-constrain&#x27;, &#x27;dd-proxy&#x27;, &#x27;dd-drop&#x27;, &#x27;dd-scroll&#x27;, function(Y) {</pre>


<h3 id="making-the-nodes-drag-instances-and-drop-targets">Making the Nodes Drag Instances and Drop Targets</h3>
<p>Now we have our YUI instance ready, we can make the list items draggable. We will do this using <code>Y.Node.all</code></p>
<p>We will be passing the selector string <code>#play ul li</code> to <code>Y.all</code> to have it return us a <code>NodeList</code> of the li's in our 2 lists.
Using this selector syntax we will be able to add new list markup to the <code>#play</code> div and not have to change our code.</p>
<p>Then we will walk that <code>NodeList</code> and create our draggable Nodes.</p>
<p>Also note that we are using the Node's <code>parentNode</code> as our node in the DDNodeScroll plugin.</p>

<pre class="code prettyprint">&#x2F;&#x2F;Get the list of li&#x27;s in the lists and make them draggable
var lis = Y.all(&#x27;#play ul li&#x27;);
lis.each(function(v, k) {
    var dd = new Y.DD.Drag({
        node: v,
        &#x2F;&#x2F;Make it Drop target and pass this config to the Drop constructor
        target: {
            padding: &#x27;0 0 0 20&#x27;
        }
    }).plug(Y.Plugin.DDProxy, {
        &#x2F;&#x2F;Don&#x27;t move the node at the end of the drag
        moveOnEnd: false
    }).plug(Y.Plugin.DDConstrained, {
        &#x2F;&#x2F;Keep it inside the #play node
        constrain2node: &#x27;#play&#x27;
    }).plug(Y.Plugin.DDNodeScroll, {
        node: v.get(&#x27;parentNode&#x27;)
    });
});</pre>


<h3 id="making-the-list-drop-targets-too">Making the List Drop Targets too</h3>
<p>We need to make each UL node a Drop Target so we can catch drops on the empty space of the list. 
Using this selector syntax we will be able to add new list markup to the <code>#play</code> div and not have to change our code.</p>

<pre class="code prettyprint">&#x2F;&#x2F;Create simple targets for the 2 lists.
var uls = Y.all(&#x27;#play ul&#x27;);
uls.each(function(v, k) {
    var tar = new Y.DD.Drop({
        node: v
    });
});</pre>


<h3 id="using-event-bubbling">Using Event Bubbling</h3>
<p>By default, all Drag and Drop instances bubble their events up to the DragDropMgr. In this example we are assuming that there are no other Drag operations in this YUI Instance.</p>
<h3 id="start-drag-event">Start Drag Event</h3>
<p>The first thing we will do is handle the <code>drag:start</code> event. In this event, we will setup some styles to apply to the <code>node</code> and <code>dragNode</code> of the current Drag instance.</p>
<p>We will also be copying the <code>innerHTML</code> of the <code>node</code> and copying that to the <code>innerHTML</code> of the <code>dragNode</code>.</p>
<p><em>It should be noted, that
doing this will also copy any <code>id</code>'s of the nodes inside the <code>node</code>. So if you are using this on something that is <code>id</code> based, you may need to remove the <code>id</code>'s
of the nodes inside the <code>node</code> that is being dragged.
</em></p>

<pre class="code prettyprint">Y.DD.DDM.on(&#x27;drag:start&#x27;, function(e) {
    &#x2F;&#x2F;Get our drag object
    var drag = e.target;
    &#x2F;&#x2F;Set some styles here
    drag.get(&#x27;node&#x27;).setStyle(&#x27;opacity&#x27;, &#x27;.25&#x27;);
    drag.get(&#x27;dragNode&#x27;).set(&#x27;innerHTML&#x27;, drag.get(&#x27;node&#x27;).get(&#x27;innerHTML&#x27;));
    drag.get(&#x27;dragNode&#x27;).setStyles({
        opacity: &#x27;.5&#x27;,
        borderColor: drag.get(&#x27;node&#x27;).getStyle(&#x27;borderColor&#x27;),
        backgroundColor: drag.get(&#x27;node&#x27;).getStyle(&#x27;backgroundColor&#x27;)
    });
});</pre>


<h3 id="end-drag-event">End Drag Event</h3>
<p>In this event, we will reset some of the styles set in the <code>drag:start</code> event.</p>

<pre class="code prettyprint">Y.DD.DDM.on(&#x27;drag:end&#x27;, function(e) {
    var drag = e.target;
    &#x2F;&#x2F;Put out styles back
    drag.get(&#x27;node&#x27;).setStyles({
        visibility: &#x27;&#x27;,
        opacity: &#x27;1&#x27;
    });
});</pre>


<h3 id="drag-event">Drag Event</h3>
<p>In this event, we will track the up/down movement for later use.</p>

<pre class="code prettyprint">Y.DD.DDM.on(&#x27;drag:drag&#x27;, function(e) {
    &#x2F;&#x2F;Get the last y point
    var y = e.target.lastXY[1];
    &#x2F;&#x2F;is it greater than the lastY var?
    if (y &amp;lt; lastY) {
        &#x2F;&#x2F;We are going up
        goingUp = true;
    } else {
        &#x2F;&#x2F;We are going down.
        goingUp = false;
    }
    &#x2F;&#x2F;Cache for next check
    lastY = y;

    &#x2F;&#x2F;Added to support scrolling
    Y.DD.DDM.syncActiveShims(true);    
});</pre>


<h3 id="over-drop-event">Over Drop Event</h3>
<p>In this event, we know which target we are over, so we add the Drag node to the list either above or below the current Drop Target.</p>
<p>Here we also change the node which needs to be scrolled. Since we are changing lists, we need to tell the scrolling plugin instance that it needs to check against another node.</p>

<pre class="code prettyprint">Y.DD.DDM.on(&#x27;drop:over&#x27;, function(e) {
    &#x2F;&#x2F;Get a reference to out drag and drop nodes
    var drag = e.drag.get(&#x27;node&#x27;),
        drop = e.drop.get(&#x27;node&#x27;);
    
    &#x2F;&#x2F;Are we dropping on a li node?
    if (drop.get(&#x27;tagName&#x27;).toLowerCase() === &#x27;li&#x27;) {
        &#x2F;&#x2F;Are we not going up?
        if (!goingUp) {
            drop = drop.get(&#x27;nextSibling&#x27;);
        }
        &#x2F;&#x2F;Add the node to this list
        e.drop.get(&#x27;node&#x27;).get(&#x27;parentNode&#x27;).insertBefore(drag, drop);
        &#x2F;&#x2F;Set the new parentScroll on the nodescroll plugin
        e.drag.nodescroll.set(&#x27;parentScroll&#x27;, e.drop.get(&#x27;node&#x27;).get(&#x27;parentNode&#x27;));        
        &#x2F;&#x2F;Resize this node&#x27;s shim, so we can drop on it later.
        e.drop.sizeShim();
    }
});</pre>


<h3 id="drop-hit-event">Drop Hit Event</h3>
<p>In this event, we check to see if the target that was dropped on was not an LI node. If it wasn't, then we know it was dropped on the empty space of the UL.</p>

<pre class="code prettyprint">Y.DD.DDM.on(&#x27;drag:drophit&#x27;, function(e) {
    var drop = e.drop.get(&#x27;node&#x27;),
        drag = e.drag.get(&#x27;node&#x27;);

    &#x2F;&#x2F;if we are not on an li, we must have been dropped on a ul
    if (drop.get(&#x27;tagName&#x27;).toLowerCase() !== &#x27;li&#x27;) {
        if (!drop.contains(drag)) {
            drop.appendChild(drag);
            &#x2F;&#x2F;Set the new parentScroll on the nodescroll plugin
            e.drag.nodescroll.set(&#x27;parentScroll&#x27;, e.drop.get(&#x27;node&#x27;));            
        }
    }
});</pre>



<h3 id="full-javascript-source">Full Javascript Source</h3>

<pre class="code prettyprint">YUI().use(&#x27;dd-constrain&#x27;, &#x27;dd-proxy&#x27;, &#x27;dd-drop&#x27;, &#x27;dd-scroll&#x27;, function(Y) {
    &#x2F;&#x2F;Listen for all drop:over events
    &#x2F;&#x2F;Y.DD.DDM._debugShim = true;

    Y.DD.DDM.on(&#x27;drop:over&#x27;, function(e) {
        &#x2F;&#x2F;Get a reference to our drag and drop nodes
        var drag = e.drag.get(&#x27;node&#x27;),
            drop = e.drop.get(&#x27;node&#x27;);
        
        &#x2F;&#x2F;Are we dropping on a li node?
        if (drop.get(&#x27;tagName&#x27;).toLowerCase() === &#x27;li&#x27;) {
            &#x2F;&#x2F;Are we not going up?
            if (!goingUp) {
                drop = drop.get(&#x27;nextSibling&#x27;);
            }
            &#x2F;&#x2F;Add the node to this list
            e.drop.get(&#x27;node&#x27;).get(&#x27;parentNode&#x27;).insertBefore(drag, drop);
            &#x2F;&#x2F;Set the new parentScroll on the nodescroll plugin
            e.drag.nodescroll.set(&#x27;parentScroll&#x27;, e.drop.get(&#x27;node&#x27;).get(&#x27;parentNode&#x27;));            
            &#x2F;&#x2F;Resize this nodes shim, so we can drop on it later.
            e.drop.sizeShim();
        }
    });
    &#x2F;&#x2F;Listen for all drag:drag events
    Y.DD.DDM.on(&#x27;drag:drag&#x27;, function(e) {
        &#x2F;&#x2F;Get the last y point
        var y = e.target.lastXY[1];
        &#x2F;&#x2F;is it greater than the lastY var?
        if (y &lt; lastY) {
            &#x2F;&#x2F;We are going up
            goingUp = true;
        } else {
            &#x2F;&#x2F;We are going down.
            goingUp = false;
        }
        &#x2F;&#x2F;Cache for next check
        lastY = y;
        Y.DD.DDM.syncActiveShims(true);
    });
    &#x2F;&#x2F;Listen for all drag:start events
    Y.DD.DDM.on(&#x27;drag:start&#x27;, function(e) {
        &#x2F;&#x2F;Get our drag object
        var drag = e.target;
        &#x2F;&#x2F;Set some styles here
        drag.get(&#x27;node&#x27;).setStyle(&#x27;opacity&#x27;, &#x27;.25&#x27;);
        drag.get(&#x27;dragNode&#x27;).set(&#x27;innerHTML&#x27;, drag.get(&#x27;node&#x27;).get(&#x27;innerHTML&#x27;));
        drag.get(&#x27;dragNode&#x27;).setStyles({
            opacity: &#x27;.5&#x27;,
            borderColor: drag.get(&#x27;node&#x27;).getStyle(&#x27;borderColor&#x27;),
            backgroundColor: drag.get(&#x27;node&#x27;).getStyle(&#x27;backgroundColor&#x27;)
        });
    });
    &#x2F;&#x2F;Listen for a drag:end events
    Y.DD.DDM.on(&#x27;drag:end&#x27;, function(e) {
        var drag = e.target;
        &#x2F;&#x2F;Put our styles back
        drag.get(&#x27;node&#x27;).setStyles({
            visibility: &#x27;&#x27;,
            opacity: &#x27;1&#x27;
        });
    });
    &#x2F;&#x2F;Listen for all drag:drophit events
    Y.DD.DDM.on(&#x27;drag:drophit&#x27;, function(e) {
        var drop = e.drop.get(&#x27;node&#x27;),
            drag = e.drag.get(&#x27;node&#x27;);

        &#x2F;&#x2F;if we are not on an li, we must have been dropped on a ul
        if (drop.get(&#x27;tagName&#x27;).toLowerCase() !== &#x27;li&#x27;) {
            if (!drop.contains(drag)) {
                drop.appendChild(drag);
                &#x2F;&#x2F;Set the new parentScroll on the nodescroll plugin
                e.drag.nodescroll.set(&#x27;parentScroll&#x27;, e.drop.get(&#x27;node&#x27;));                
            }
        }
    });
    
    &#x2F;&#x2F;Static Vars
    var goingUp = false, lastY = 0;

    &#x2F;&#x2F;Get the list of li&#x27;s in the lists and make them draggable
    var lis = Y.all(&#x27;#play ul li&#x27;);
    lis.each(function(v, k) {
        var dd = new Y.DD.Drag({
            node: v,
            target: {
                padding: &#x27;0 0 0 20&#x27;
            }
        }).plug(Y.Plugin.DDProxy, {
            moveOnEnd: false
        }).plug(Y.Plugin.DDConstrained, {
            constrain2node: &#x27;#play&#x27;
        }).plug(Y.Plugin.DDNodeScroll, {
            node: v.get(&#x27;parentNode&#x27;)
        });
    });

    &#x2F;&#x2F;Create simple targets for the 2 lists.
    var uls = Y.all(&#x27;#play ul&#x27;);
    uls.each(function(v, k) {
        var tar = new Y.DD.Drop({
            node: v
        });
    });
    
    
});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#setting-up-the-lists">Setting up the lists</a>
</li>
<li>
<a href="#make-it-scrollable">Make it scrollable</a>
</li>
<li>
<a href="#setting-up-the-yui-instance">Setting up the YUI Instance</a>
</li>
<li>
<a href="#making-the-nodes-drag-instances-and-drop-targets">Making the Nodes Drag Instances and Drop Targets</a>
</li>
<li>
<a href="#making-the-list-drop-targets-too">Making the List Drop Targets too</a>
</li>
<li>
<a href="#using-event-bubbling">Using Event Bubbling</a>
</li>
<li>
<a href="#start-drag-event">Start Drag Event</a>
</li>
<li>
<a href="#end-drag-event">End Drag Event</a>
</li>
<li>
<a href="#drag-event">Drag Event</a>
</li>
<li>
<a href="#over-drop-event">Over Drop Event</a>
</li>
<li>
<a href="#drop-hit-event">Drop Hit Event</a>
</li>
<li>
<a href="#full-javascript-source">Full Javascript Source</a>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="A simple drag interaction that doesn&#x27;t require a drop interaction.">
                                        <a href="simple-drag.html">Simple Drag</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to apply the Drag Plugin to a node.">
                                        <a href="drag-plugin.html">Drag - Node plugin</a>
                                    </li>
                                
                            
                                
                                    <li data-description="A simple proxy drag interaction that doesn&#x27;t require a drop interaction.">
                                        <a href="proxy-drag.html">Drag - Proxy</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to constrain a draggable Node to another Node&#x27;s region.">
                                        <a href="constrained-drag.html">Drag - Constrained to a Region</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using interaction groups, this example demonstrates how to tie into the Drag &amp; Drop Utility&#x27;s interesting moments to provide visual affordances for the current drag operation.">
                                        <a href="groups-drag.html">Drag - Interaction Groups</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The use of the drag shim when dragging nodes over other troublesome nodes.">
                                        <a href="shim-drag.html">Using the Drag Shim</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use the Drop Target events to code your application.">
                                        <a href="drop-code.html">Using Drop Based Coding</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How you can use the DD Scroll plugin to scroll the browser window as you drag.">
                                        <a href="winscroll.html">Window Scrolling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use DD.Delegate to create a scalable solution which supports multiple draggable items.">
                                        <a href="delegate.html">Drag Delegation</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using DD.Delegate to support dragging multiple items and dropping them onto a Drop Target.">
                                        <a href="delegate-drop.html">Drag Delegation with a Drop Target</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use Drag plugins with a DD Delegate based solution.">
                                        <a href="delegate-plugins.html">Using Drag Plugins with Delegate</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling.">
                                        <a href="list-drag.html">List Reorder w/Bubbling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling and Node Scrolling.">
                                        <a href="scroll-list.html">List Reorder w/Scrolling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to make an animated node a Drop target.">
                                        <a href="anim-drop.html">Animated Drop Targets</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Example Photo Browser application.">
                                        <a href="photo-browser.html">Photo Browser</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
                                        <a href="portal-drag.html">Portal Style Example</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Working with multiple YUI instances.">
                                        <a href="../yui/yui-multi.html">Multiple Instances</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
                                        <a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
